<template>
	<view class="content">

		<!-- 基本信息 -->
		<view class="base_info_div">
			<!-- 头像 名称 地址 -->
			<view style="display: flex;align-items: center;margin: 0 0 12rpx 0;">
				<!-- 头像 -->
				<image src="/static/ic_fwl.png" style="width: 100rpx;height: 100rpx;"></image>
				<!-- 名称 地址 -->
				<view style="display: flex;flex-direction: column;">
					<view style="margin: 0rpx 0 0 16rpx;font-size: 28rpx;font-weight: bold;">{{info.company_name}}</view>
					<!-- 标签 -->
					<view style="margin: 8rpx 0 0 16rpx;font-size: 22rpx;font-weight: bold;display: flex;align-items: center;">
						<view style="color: orange;margin: 0 0 0 0rpx;">评价★★★★★</view>
						<view v-if="info.is_audit == 1" style="color: orange;margin: 0 0 0 12rpx;">已认证✔</view>
						<view v-else style="color: #999;margin: 0 0 0 12rpx;">未认证✖</view>
						<view v-if="info.is_audit == 1" style="color: orange;margin: 0 0 0 12rpx;">金牌物流🏅</view>
					</view>
				</view>
			</view>
			<scroll-view v-if="info.blurb" style="height: 100rpx;">
				<rich-text :nodes="info.blurb" class="com_intro"></rich-text>
			</scroll-view>
			<view v-if="info.blurb" style="text-align: right;color: #999;font-size: 24rpx;padding: 8rpx 16rpx 8rpx 24rpx;" @click="onMoreIntro">查看更多>></view>
			<view style="margin: 4rpx 0 0 0rpx;font-size: 24rpx;color: #666;">地址：{{info.address}}</view>
			<view style="margin: 4rpx 0 0 0rpx;font-size: 24rpx;color: #666;">电话：{{info.servicephone}}</view>
			<view style="margin: 4rpx 0 -0rpx 0;font-size: 24rpx;color: #666;">联系人：{{info.name}}</view>
			<view class="op_btn_div">
				<view class="btn_edit" @click="onEditLog(info)">编辑物流公司</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="banner_div">
			<swiper indicator-dots autoplay circular style="height: 240rpx;">
				<swiper-item v-for="(item,index) in banner_list">
					<image :src="item.url" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 线路部分 -->
		<view style="font-weight: bold;font-size: 30rpx;margin: 36rpx 0 12rpx 24rpx;">运营线路</view>
		<view v-for="(item,index) in line_list" class="item_div">

			<view style="color: #BC1E1D;font-size: 28rpx;font-weight: bold;">{{item.line_name}}</view>
			<view class="op_btn_div_2">
				<view class="btn_edit" @click="onEditLine(info)">编辑线路</view>
				<view class="btn_del">删除线路</view>
			</view>

			<view style="font-size: 28rpx;margin: 12rpx 0 0 24rpx;font-weight: bold;">--收货网点--</view>
			<view v-for="(item2,index2) in item.site">
				<view style="font-size: 26rpx;margin: 0 0 0 24rpx;">网点：{{item2.site_name}}</view>
				<view style="font-size: 26rpx;margin: 0 0 0 24rpx;color: #888;">地址：{{item2.address}}</view>
				<view v-if="item2.phone_list && item2.phone_list.length > 0" style="font-size: 26rpx;margin: 0 0 0 24rpx;color: #888; display: flex;flex-wrap: wrap;"
					@click.stop="onPhone(item2)">
					电话：<view style="color: deepskyblue;text-decoration: underline;">{{item2.phone_list[0].phone}} 拨打</view>
				</view>

				<view class="op_btn_div_2" style="margin: 12rpx 0 0 24rpx;">
					<view class="btn_edit" @click="onEditSite(info)">编辑网点</view>
					<view class="btn_del">删除网点</view>
				</view>

			</view>

			<view style="font-size: 28rpx;margin: 12rpx 0 0 24rpx;font-weight: bold;">--到货网点--</view>
			<view v-for="(item2,index2) in item.unloadsite">
				<view style="font-size: 26rpx;margin: 0 0 0 24rpx;">网点：{{item2.site_name}}</view>
				<view style="font-size: 26rpx;margin: 0 0 0 24rpx;color: #888;">地址：{{item2.address}}</view>
				<view v-if="item2.phone_list && item2.phone_list.length > 0" style="font-size: 26rpx;margin: 0 0 0 24rpx;color: #888; display: flex;flex-wrap: wrap;"
					@click.stop="onPhone(item2)">
					电话：<view style="color: deepskyblue;text-decoration: underline;">{{item2.phone_list[0].phone}} 拨打</view>
				</view>

				<view class="op_btn_div_2" style="margin: 12rpx 0 0 24rpx;">
					<view class="btn_edit" @click="onEditSite(info)">编辑网点</view>
					<view class="btn_del">删除网点</view>
				</view>

			</view>

		</view>
		<!-- 暂无线路 -->
		<view v-if="!line_list || line_list.length <= 0"
			style="width: calc(100% - 48rpx);height: 10vh;background: white;text-align: center;line-height: 10vh;border-radius: 16rpx;margin: 12rpx 24rpx 0 24rpx;">暂无线路~</view>

	</view>
</template>

<script>
	import { getUInfo, timestampToYMDHM, getStatusTxt } from '@/util/util.js'
	export default {
		data() {
			return {

				logistics_id: '', // 传过来的物流公司id

				// 轮播图
				banner_list: [
					{ url: 'https://q1.itc.cn/q_70/images01/20241130/6b73b037a069435fa46cdac24626ae2f.jpeg' },
					{ url: 'https://img2.baidu.com/it/u=3813568375,2145272352&fm=253&fmt=auto&app=120&f=JPEG?w=1084&h=500' },
					{ url: 'https://pp.linyi.cn/__local/3/5E/07/2B325D5D87BF3B455A82FD1D297_6969C5EE_151AFE.jpg' },
				],
				line_list: [], // 运营线路
				site_list: [{}, {}, {}], // 网点信息

				info: {}, // 请求的物流公司详情
			}
		},

		onLoad(opts) {
			// uni.setNavigationBarTitle({ title: `${opts.name}` })
			this.logistics_id = opts.id
		},

		mounted() {
			uni.showLoading({ title: '加载中..', mask: true, })
			this.getLogInfo()
		},

		methods: {

			// 编辑物流公司
			onEditLog(info) {
				// 需要传递的数据
				let data = {
					address: this.info.address,
					admin_id: this.info.admin_id,
					company_name: this.info.company_name,
					latitude: this.info.latitude,
					longitude: this.info.longitude,
					name: this.info.name,
					queryphone: this.info.queryphone,
					servicephone: this.info.servicephone,
				}
				uni.navigateTo({ url: `/pages/apply_list/edit_logcom?data=${JSON.stringify(data)}` })
			},

			// 编辑线路
			onEditLine(info) {
				uni.navigateTo({ url: '/pages/apply_list/edit_line' })
			},

			// 编辑网点
			onEditSite(info) {
				uni.navigateTo({ url: '/pages/apply_list/edit_site' })
			},

			// 拨打电话
			onPhone(item) {
				console.log('拨打电话item = ', item);
				if (!item || !item.phone_list || item.phone_list.length <= 0 || !item.phone_list[0].phone) {
					uni.showToast({ icon: 'none', title: '未录入号码' })
					return
				}
				uni.makePhoneCall({ phoneNumber: `${item.phone_list[0].phone}` })
			},

			// 查看更多简介
			onMoreIntro() {
				uni.setStorageSync('rich_text', this.info.blurb)
				uni.navigateTo({ url: `/pages/ext/rich_text/rich_text?title=${this.info.company_name}` })
			},

			// 接口:物流公司详情
			async getLogInfo() {
				let that = this
				let token = getUInfo().token
				let res = await that.$getLogInfo({ logistics_id: this.logistics_id })
				if (res.code == 1) {
					this.info = res.data
					// 处理banner数据
					if (this.info.banner && this.info.banner.length > 0) {
						this.banner_list = this.info.banner
					}
					// 处理线路数据
					this.line_list = res.data.alltrace
					// 处理线路数据中的电话
					this.line_list = this.line_list.map((item, index) => {
						// 处理收货网点数据
						let site = item.site
						site && site.map((item2, index2) => {
							let phone_list = item2.phone_list
							if (phone_list && phone_list != 'null') {
								phone_list = JSON.parse(phone_list)
								item2.phone_list = phone_list
							}
							return item2
						})
						// 处理卸货网点数据
						let unloadsite = item.unloadsite
						unloadsite && unloadsite.map((item2, index2) => {
							let phone_list = item2.phone_list
							if (phone_list && phone_list != 'null') {
								phone_list = JSON.parse(phone_list)
								item2.phone_list = phone_list
							}
							return item2
						})

						return item
					})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #F8F8F8;
	}

	.base_info_div {
		margin: 12rpx 24rpx 12rpx 24rpx;
		padding: 24rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.banner_div {
		margin: 12rpx 24rpx 12rpx 24rpx;
		/* padding: 24rpx; */
		background-color: white;
		border-radius: 16rpx;
	}

	.com_intro {
		font-size: 24rpx;
		/* display: -webkit-box; */
		/* -webkit-line-clamp: 2; */
		height: 100%;
		overflow: hidden;
	}

	.item_div {
		margin: 12rpx 24rpx 12rpx 24rpx;
		padding: 24rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.op_btn_div {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 12rpx 0rpx 0 0;
		font-size: 26rpx;
		color: #444;
	}

	.op_btn_div_2 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 12rpx 0rpx 0 0;
		font-size: 26rpx;
		color: #444;
	}

	.btn_edit {
		/* width: 100rpx; */
		max-width: 180rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		color: orange;
		font-weight: bold;
		border: solid orange 1rpx;
		border-radius: 8rpx;
		margin: 0 16rpx 0 0rpx;
		padding: 0 24rpx 0 24rpx;
	}

	.btn_del {
		/* width: 100rpx; */
		max-width: 180rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		color: red;
		font-weight: bold;
		border: solid red 1rpx;
		border-radius: 8rpx;
		margin: 0 16rpx 0 0rpx;
		padding: 0 24rpx 0 24rpx;
	}
</style>